<template>
  <div ref="echartsBarPieTop" :style="`height: ${height}`" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartsBarpieTop',
  data() {
    return {
      myChart: null, // 用来存放图形实例
      price: [237, 173.3, 158, 139, 124]
    }
  },
  watch: {
    price(val) {
      this.InitEcharts()
    }
  },
  mounted() {
    this.InitEcharts()
    this.myChart.on('click', this.ClickPie)
    // 绑定监听事件
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    // 销毁 Echarts 实例
    this.myChart.dispose()
  },
  methods: {
    // 初始化echarts
    InitEcharts() {
      this.myChart = echarts.init(this.$refs['echartsBarPieTop'])
      const zhongguancun = [
        { name: '山前', value: 1303 },
        { name: '平原', value: 288 },
        { name: '山中', value: 187 }
      ]
      const options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0],
          name: '单价(元/米)',
          nameLocation: 'center',
          nameGap: 25,
          nameTextStyle: {
            fontSize: 12,
            color: '#fff'
          },
          axisLabel: {
            fontSize: 12,
            color: '#fff'
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: '项目编号',
          nameLocation: 'start',
          nameTextStyle: {
            color: '#fff',
            fontSize: 12
          },
          type: 'category',
          data: ['KO0001', 'KO0002', 'KO0003', 'KO0004', 'KO0005'],
          inverse: true,
          axisLabel: {
            fontSize: 12,
            fontWeight: 'bold',
            color: '#fff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2d3d53'
            }
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          top: '120px',
          left: '1%',
          bottom: '20px',
          containLabel: true
        },
        legend: {
          x: 'center',
          top: 10,
          show: true,
          data: ['山前', '平原', '山中'],
          textStyle: { // 图例文字的样式
            color: '#6AA4F5',
            fontSize: 14
          }
        },
        series: [{
          name: '单价',
          type: 'bar',
          data: this.price,
          barWidth: '6px',
          itemStyle: {
            color: '#00ffe6',
            barBorderRadius: [180]
          },
          label: {
            show: true,
            position: 'right'
          }
        }, {
          name: '地貌',
          type: 'pie',
          radius: [0, 35],
          center: ['85%', '25%'],
          color: ['#9fe6b8', '#ffdb5c', '#fb7293'],
          label: {
            position: 'inside',
            formatter: function(param) {
              if (param.value) {
                return param.value
              } else {
                return ''
              }
            },
            fontSize: 12,
            color: '#fff'
          },
          data: zhongguancun
        }]
      }
      // 给实例对象添加配置参数
      this.myChart.setOption(options)
    },
    // 点击地貌
    ClickPie(param) {
      if (param.seriesType === 'pie') {
        const actions = new Map([
          [0, [267, 193.3, 178, 139, 124]],
          [1, [287, 193.3, 178, 139, 124]],
          [2, [367, 193.3, 178, 139, 124]],
          ['default', [267, 193.3, 178, 139, 124]]
        ])
        const action = actions.get(param.dataIndex) || actions.get('default')
        this.price = action
      }
    },
    // 图形根据容器大小来进行缩放
    resizeHandler() {
      this.myChart.resize()
    }
  }
}
</script>

